<template>
  <div class="timeLine">
    <div class="timeLine-pagination">
      <!-- :autoplay="{
          delay: 10000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
          pauseOnMouseEnter: true,
        }" -->

      <!-- :slidesPerView="4" -->
      <swiper
        :slidesPerView="4"
        watch-slides-progress
        @swiper="paginationInit"
        class="timeLine-pagination-swiper"
        v-if="list.length"
      >
        <swiper-slide
          class="timeLine-pagination-slide"
          v-for="item in list"
          :key="item.name"
        >
          <div class="timeLine-pagination-item">
            <div class="timeLine-pagination-item-dot"></div>
            <div class="timeLine-pagination-item-name">
              {{ item.name }}
            </div>
          </div>
        </swiper-slide>
        <template #container-start>
          <div class="timeLine-pagination-swiper-next"></div>
          <div class="timeLine-pagination-swiper-prev"></div>
          <div class="timeLine-pagination-line"></div>
        </template>
      </swiper>
    </div>
    <div class="timeLine-list">
      <swiper
        loop
        :thumbs="{
          swiper: pagination,
        }"
        @slideChange="listChange"
        class="timeLine-list-swiper"
        v-if="list.length"
      >
        <swiper-slide
          class="timeLine-list-slide"
          v-for="item in list"
          :key="item"
        >
          <div class="timeLine-list-item">
            <slot :detail="item"></slot>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    list: Array,
  },
  data() {
    return {
      pagination: null,
    };
  },
  mounted() {},
  methods: {
    paginationInit(e) {
      this.pagination = e;
    },
    /**
     *
     */
    listChange(e) {
      this.$emit("change", e.realIndex);
    },
  },
};
</script>
<style lang="scss" scoped>
.timeLine {
  &-pagination {
    height: 100px;
    display: flex;
    align-items: center;

    &-line {
      position: absolute;
      top: 7px;
      width: 100%;
      height: 2px;
      background: #e9e9e9;
    }

    &-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      cursor: pointer;
      width: fit-content;
      margin: auto;

      &-dot {
        width: 14px;
        height: 14px;
        border: 1px solid transparent;
        border-radius: 50%;
        opacity: 0.5;
        display: flex;
        justify-content: center;
        align-items: center;

        &::after {
          display: block;
          content: "";
          width: 6px;
          height: 6px;
          background-color: #333;
          border-radius: 3px;
        }
      }

      &-name {
        margin-top: 10px;
        font-size: 20px;
        font-weight: 700;
        color: #2e2e2f;
        line-height: 20px;
      }
    }

    &::v-deep(.swiper-slide-thumb-active) &-item {
      &-dot {
        opacity: 1;
        border: 1px solid color.$base;

        &::after {
          background-color: color.$base;
        }
      }

      &-name {
        color: color.$base;
      }
    }
  }
}
</style>
